<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="qrcode.min.js"></script>
	 <script src="html2canvas.js"></script>
	  <script src="jquery-1.11.1.min.js"></script>
    <style>

        *{
            margin: 0;
            padding: 0;
        }
        html,body{
            height:100%;
        }
        .cont{
            width:7.5rem;
            height:100%;
            background: red;
            margin: 0 auto;
            position: relative;
        }
        #canvas{
            position: absolute;
            left:0;
            top: 0;
        }
        #two,#font{
            display: none;
        }
        #imgShow{
            width:100%;
            height:100%;
            position: absolute;
            top: 0;
            left:0;
            z-index:12;
        }
    </style>
</head>
<body>
    <div><div id="qrcode"></div>
   <div id="h">
      <canvas id="myCanvas"></canvas>
   </div></div>

   
	 <script type="text/javascript">
  function aa(){
      
/* new QRCode(document.getElementById("qrcode"), supply_id);  // 设置要生成二维码的链接
 */
	var qrcode = new QRCode(document.getElementById("qrcode"), {

		text: supply_id,
		width: 150,
		height: 150,
		colorDark : "#000000",
		colorLight : "#ffffff",
		correctLevel : QRCode.CorrectLevel.H
	});

  
  }  
function getQueryVariable(variable)
{
       var query = window.location.search.substring(1);
       var vars = query.split("&");
       for (var i=0;i<vars.length;i++) {
               var pair = vars[i].split("=");
               if(pair[0] == variable){return pair[1];}
       }
       return(false);
}
    var supply_id = "https://jukou.laidedui.com/jkapi?id=shop_1";



</script>

    <script>
	$(function(){
     var url= "这里填写你要生成二维码的东西";
     //默认使用Canvas生成，并显示到图片
     jQuery('#qrcode').qrcode({
         render: "canvas",
         width       : 100,     //设置宽度
         height      : 100,     //设置高度
         typeNumber  : -1,      //计算模式
         correctLevel:2,
         text: url
     });
     //从 canvas 提取图片 image
     function convertCanvasToImage(canvas) {
         //新Image对象，可以理解为DOM
         var image = new Image();
         // canvas.toDataURL 返回的是一串Base64编码的URL，当然,浏览器自己肯定支持
         // 指定格式 PNG
         image.src = canvas.toDataURL("image/png");
         return image;
     }

     var mycanvas1=document.getElementsByTagName('canvas')[0]; //获取网页中的canvas对象
     //将转换后的img标签插入到html中
     var img=convertCanvasToImage(mycanvas1);
     $('#qrcode').html("");//移除已生成的避免重复生成
     $('#qrcode').append(img);//imagQrDiv表示你要插入的容器id
     $('#qrcode img').attr("id","tulip");
     var canvas = document.getElementById("myCanvas");
     var ctx = canvas.getContext("2d");
     //图片
     var img = new Image();
     img.src = '这里是你自定义的背景图';
     canvas.width = window.screen.availWidth;
     canvas.height = window.screen.availHeight;
     var ewm=document.getElementById("tulip");
     img.crossOrigin="*";
     img.onload = function() { //必须等待图片加载完成
         ctx.drawImage(img, 0, 0, window.screen.availWidth, window.screen.availHeight); //绘制图像进行拉伸
         ctx.drawImage(ewm, window.screen.availWidth/3,window.screen.availHeight/3);
         var srcImg = new Image();
         srcImg.src = canvas.toDataURL('images/png');
         $('#h').html("");//移除已生成的避免重复生成
         $('#h').append(srcImg);//imagQrDiv表示你要插入的容器id
         $('#h img').attr("width",'100%');
         $('#h img').attr("height",'100%');//imagQrDiv表示你要插入的容器id
         $('#qrcode').hide();
     }
 });

    </script>
	
</body>
</html>